<script lang="ts">
import { defineComponent, ref, reactive, nextTick, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { UserModule } from "@/store/modules/user";
import { Erc20Module } from "@/store/modules/erc20";
import { LGTRewardModule } from "@/store/modules/LGTRewardState";
import { useI18n } from "vue-i18n";
import { formatAddress, toWei, fromWei, toStringMatch } from '@/utils/format';
import { LGT_TOKEN, LGTReward_CONTRACT } from "@/contract"
import { BigNumber } from "bignumber.js";
import Clipboard from "clipboard";
// Toast
import { showToast, showDialog } from 'vant';
import RankingRecord2 from "@/components/RankingRecord2.vue";

export default defineComponent({
    components: {
        RankingRecord2
    },
    setup() {
        const router = useRouter();
        const { t } = useI18n();
        const referrerRefs = ref()
        const referrer: any = ref(router.currentRoute.value.query.referrer)
        const active = ref(0)
        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
        });
        const setat2 = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const loading = ref(false)
        const pageLoading = ref(true)
        const rewardLoading = ref([false, false, false, false, false, false, false, false, false])
        const userVInfo = ref({})
        const rankInfo = ref({})
        const userRewardInfo = ref({})
        const compenInfo: any = ref({})
        const compenPool = ref([])
        const vInfo = ref({})
        const directsByPage: any = ref([])
        const time = computed(() => {
            let releaseTime = 1701428400;
            let timestamp = new Date().getTime() / 1000;
            let day = 86400;
            return (
                (releaseTime +
                    Math.ceil((timestamp - releaseTime) / day) * day -
                    timestamp) *
                1000
            );
        });
        const LGT = ref()
        const amount = ref()
        const shareAddress = computed(() => {
            return UserModule.userAddr
        });
        const onLoad = async () => {
            const res = await LGTRewardModule.getDirectsByPage(setat2)
            directsByPage.value = []
            setat2.total = res.total
            for (let index = 0; index < res.directAddrs.length; index++) {
                directsByPage.value.push({
                    directAddr: res.directAddrs[index],
                    downlineAmount: res.downlineAmounts[index],
                    personalAmount: res.personalAmounts[index]
                })
            }
            //   const res = await getNewsList({ ...setat, pageNum: setat.pageNum - 1 });
            //   setat.total = res.data.data.Total;
            //   list.value = res.data.data.NewsList;
        };
        const copy = () => {
            const clipboard = new Clipboard(".copy");
            nextTick(() => {
                clipboard.on("success", () => {
                    showToast(t("layout.copySuccessfully"));
                    clipboard.destroy();
                });
                clipboard.on("error", () => {
                    showToast(t("layout.fail"));
                    clipboard.destroy();
                });
            });
        };
        const sendStake = async () => {
            if (Number(amount.value) < 10 || amount.value > 1000) return showToast(`${t("layout.PleaseEnterQuantity")}(10-1000)`)
            if (fromWei(userVInfo.value[2]) > Number(amount.value)) return showToast(`${t("layout.TheAmountNeedsToBeGreaterThanOrEqualToTheLastDepositAmount")}(${fromWei(userVInfo.value[2])})`)
            if (fromWei(userVInfo.value[2]) >= 1000 && toStringMatch(2 * fromWei(userRewardInfo.value[6]) - fromWei(userRewardInfo.value[7])) >= 500) return showToast(`${t('layout.Onlyagain')}`)
            loading.value = true;
            const isUserExists = await LGTRewardModule.isUserExists();
            if (!isUserExists) {
                referrer.value = referrer.value?.trim();
                try {
                    const isUserExistsReferrer = await LGTRewardModule.isUserExists(
                        referrer.value
                    );
                    if (!isUserExistsReferrer) {
                        loading.value = false;
                        referrerRefs.value.setat.open = true;
                        return;
                    }
                } catch (error: any) {
                    referrerRefs.value.setat.open = true;
                    loading.value = false;
                    return;
                }
            }

            try {
                if (LGT.value < Number(amount.value)) {
                    showToast(t("layout.theBalanceLGTIsOnly") + LGT.value);
                    loading.value = false;
                    return;
                }
                const allowance = await Erc20Module.allowance({
                    owner: LGT_TOKEN,
                    spender: LGTReward_CONTRACT,
                });
                if (new BigNumber(allowance).lte(toWei(amount.value))) {
                    if (allowance !== toWei(amount.value))
                        await Erc20Module.approve({
                            owner: LGT_TOKEN,
                            spender: LGTReward_CONTRACT,
                            appValue: amount.value,
                        });
                }
                await LGTRewardModule.stake({ referrer: referrer.value || UserModule.userAddr, amount: amount.value });
                showDialog({ title: `${t("layout.DepositSuccessful")}` })
                amount.value = null
                loadData()
            } catch (error) { }
            loading.value = false;
        };
        const setReferrer = (address: string) => {
            referrer.value = address
            sendStake()
        }
        const sendGetReward = async (id: number) => {
            try {
                rewardLoading.value[id] = true
                await LGTRewardModule.getReward(id)
                showDialog({ title: `${t("layout.ReceivedSuccessfully")}` })
                loadData()
            } catch (error) {
            }
            rewardLoading.value[id] = false
        }
        const loadData = async () => {
            pageLoading.value = true
            LGTRewardModule.rankInfo().then(res => {
                rankInfo.value = res
            })
            LGTRewardModule.userRewardInfo().then(res => {
                userRewardInfo.value = res
            })
            LGTRewardModule.vInfo().then(res => {
                vInfo.value = res
                console.log(vInfo.value)
            })
            LGTRewardModule.compenInfo().then(res => {
                compenInfo.value = res;
                const timestamp = new Date().getTime();
                const compenTime = timestamp - Number(res.compenTime * 1000);
                const day = 86400000;
                if (compenTime > day) {
                    compenInfo.value.endTimestamp = 0;
                } else {
                    compenInfo.value.endTimestamp = day - compenTime;
                }
                const just: any = [];
                const lose: any = [];
                compenPool.value = [];
                for (let index = 0; index < res.compenPool.length; index++) {
                    const element = res.compenPool[index];
                    if (index < Number(res.compenIdx)) {
                        lose.push(element);
                    } else {
                        just.push(element);
                    }
                }
                compenPool.value = lose.reverse().concat(just.reverse());
            })
            let lgt: string = await Erc20Module.balanceOf({
                owner: LGT_TOKEN,
            });
            LGT.value = fromWei(lgt);
            userVInfo.value = await LGTRewardModule.userVInfo()
            pageLoading.value = false
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                    onLoad();
                }
            },
            { immediate: true }
        );
        return {
            referrerRefs,
            active,
            formatAddress,
            time,
            setat,
            setat2,
            onLoad,
            amount,
            copy,
            loading,
            shareAddress,
            setReferrer,
            sendStake,
            sendGetReward,
            pageLoading,
            userVInfo,
            userRewardInfo,
            rankInfo,
            compenInfo,
            compenPool,
            vInfo,
            directsByPage,
            rewardLoading,
            fromWei,
            toStringMatch
        }
    },
});
</script>
<template>
    <div class="page">
        <div class="pool-banner">

        </div>
        <div class="pool-banner">
            <div class="pool-banner-bg">
                <div class="DirectPromotionPool">
                    <div class="label">{{ $t('layout.RankingPool') }}</div>
                    <div class="value">
                        {{ toStringMatch(fromWei(rankInfo.cur) + fromWei(rankInfo.next) + fromWei(rankInfo.curB) +
                            fromWei(rankInfo.nextB)) }}
                    </div>
                </div>
                <div class="DirectPromotionPool">
                    <div class="label">{{ $t('layout.RankingCountdown') }}</div>
                    <div class="value"><van-count-down :time="time" /></div>
                </div>
                <van-tabs v-model:active="active">
                    <van-tab :title="$t('layout.BigOrderRankingPool')">
                        <div class="row">
                            <div class="label">{{ $t('layout.BigOrderRankingPool') }}</div>
                            <div class="value">{{ fromWei(rankInfo.curB) }}</div>
                            <div class="logs" @click="$refs.recordRefs.onRefresh()"><img src="@/assets/image/image2.png">{{
                                $t('layout.Record') }}
                            </div>
                        </div>
                        <div class="list">
                            <ul>
                                <li>
                                    <div class="cell">{{ $t('layout.Ranking') }}</div>
                                    <div class="cell">{{ $t('layout.address') }}</div>
                                    <div class="cell">{{ $t('layout.LargeOrderAmount') }}</div>
                                </li>
                                <template v-for="(item, index) in rankInfo.rInfosB">
                                    <li :key="index"
                                        v-if="item.top != '0x0000000000000000000000000000000000000000' && fromWei(item.amount) != 0">
                                        <div class="cell">{{ index + 1 }}</div>
                                        <div class="cell">{{ formatAddress(item.top) }}</div>
                                        <div class="cell">{{ fromWei(item.amount) }}</div>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </van-tab>
                    <van-tab :title="$t('layout.InviteRankingPool')">
                        <div class="row">
                            <div class="label">{{ $t('layout.InviteRankingPool') }}</div>
                            <div class="value">{{ fromWei(rankInfo.cur) }}</div>
                            <div class="logs" @click="$refs.recordRefs2.onRefresh()"><img src="@/assets/image/image2.png">{{
                                $t('layout.Record') }}
                            </div>
                        </div>
                        <div class="list">
                            <ul>
                                <li>
                                    <div class="cell">{{ $t('layout.Ranking') }}</div>
                                    <div class="cell">{{ $t('layout.address') }}</div>
                                    <div class="cell">{{ $t('layout.DirectPerformancePromotion') }}</div>
                                </li>
                                <template v-for="(item, index) in rankInfo.rInfos">
                                    <li :key="index"
                                        v-if="item.top != '0x0000000000000000000000000000000000000000' && fromWei(item.amount) != 0">
                                        <div class="cell">{{ index + 1 }}</div>
                                        <div class="cell">{{ formatAddress(item.top) }}</div>
                                        <div class="cell">{{ fromWei(item.amount) }}</div>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="pool-ranking">
            <div class="row-box">
                <div class="cell">
                    <div class="label">{{ $t('layout.FOMOPool') }}</div>
                    <div class="value">{{ toStringMatch(fromWei(compenInfo.compenAmount), 0) }}</div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.Countdown') }}</div>
                    <div class="value"><van-count-down :time="compenInfo.endTimestamp" /></div>
                </div>
            </div>
            <div class="list">
                <ul>
                    <li>
                        <div class="cell">{{ $t('layout.Ranking') }}</div>
                        <div class="cell">{{ $t('layout.address') }}</div>
                    </li>
                    <li v-for="(item, index) in compenPool.slice((setat.pageNum - 1) * setat.pageSize, setat.pageNum * setat.pageSize)"
                        :key="index">
                        <div class="cell">{{ (setat.pageNum - 1) * setat.pageSize + index + 1 }}</div>
                        <div class="cell">
                            {{ formatAddress(item) }}
                        </div>
                    </li>
                </ul>
                <van-pagination v-model="setat.pageNum" :total-items="compenPool.length" :items-per-page="setat.pageSize"
                    :force-ellipses="true" :show-page-size="5" />
            </div>
        </div>
        <div class="pledge">
            <van-field v-model="amount" center clearable :placeholder="`${$t('layout.PleaseEnterQuantity')}(10-1000)`">
                <template #button>
                    <van-button size="small" type="primary" :loading="loading" @click="sendStake" :disabled="pageLoading">{{
                        $t('layout.payment') }}</van-button>
                </template>
            </van-field>
            <div class="myLink">
                <div class="address van-ellipsis">
                    <span>{{ $t('layout.MyInvitationLink') }}</span>：{{ shareAddress }}
                </div>
                <img src="@/assets/image/copy.png" class="copy" @click="copy" :data-clipboard-text="shareAddress" />
            </div>
        </div>
        <div class="receive-list">
            <div class="row-total">
                <div class="cell">
                    <div class="label">{{ $t('layout.MyTotalDeposit') }}</div>
                    <div class="value">{{ fromWei(userRewardInfo[6]) }}</div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.myRemainingQuota') }}</div>
                    <div class="value">{{ toStringMatch(2 * fromWei(userRewardInfo[6]) - fromWei(userRewardInfo[7])) }}
                    </div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.myLevel') }}</div>
                    <div class="value">V<span>{{ userVInfo[0] }}</span></div>
                </div>
            </div>
            <div class="row">
                <div class="cell">
                    <div class="cel">{{ $t('layout.staticAward') }}</div>
                    <div class="cel">{{ fromWei(userRewardInfo[1]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[0]" @click="sendGetReward(0)"
                            :disabled="!fromWei(userRewardInfo[1])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">{{ $t('layout.DirectRecommendationAward') }}</div>
                    <div class="cel">{{ fromWei(userRewardInfo[2]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[1]" @click="sendGetReward(1)"
                            :disabled="!fromWei(userRewardInfo[2])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">{{ $t('layout.AlgebraPrize') }}</div>
                    <div class="cel">{{ fromWei(userRewardInfo[3]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[2]" @click="sendGetReward(2)"
                            :disabled="!fromWei(userRewardInfo[3])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">{{ $t('layout.BigSingleRankingAward') }}</div>
                    <div class="cel">{{ fromWei(userVInfo[6]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[3]" @click="sendGetReward(3)"
                            :disabled="!fromWei(userVInfo[6])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">{{ $t('layout.DirectPromotionRankingAward') }}</div>
                    <div class="cel">{{ fromWei(userRewardInfo[4]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[4]" @click="sendGetReward(4)"
                            :disabled="!fromWei(userRewardInfo[4])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">{{ $t('layout.FOMOPoolPrize') }}</div>
                    <div class="cel">{{ fromWei(userRewardInfo[5]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[5]" @click="sendGetReward(5)"
                            :disabled="!fromWei(userRewardInfo[5])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">v1</div>
                    <div class="cel">{{ fromWei(userVInfo[3]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[6]" @click="sendGetReward(6)"
                            :disabled="!fromWei(userVInfo[3])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">v2</div>
                    <div class="cel">{{ fromWei(userVInfo[4]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[7]" @click="sendGetReward(7)"
                            :disabled="!fromWei(userVInfo[4])">{{ $t('layout.receive') }}</van-button></div>
                </div>
                <div class="cell">
                    <div class="cel">v3</div>
                    <div class="cel">{{ fromWei(userVInfo[5]) }}</div>
                    <div class="cel"><van-button size="mini" :loading="rewardLoading[8]" @click="sendGetReward(8)"
                            :disabled="!fromWei(userVInfo[5])">{{ $t('layout.receive') }}</van-button></div>
                </div>
            </div>
        </div>
        <div class="allNetworkVMembers">
            <div class="title">
                <img src="@/assets/image/image3.png" alt="" srcset="">
                {{ $t('layout.AllNetworkVMembers') }}
                <img src="@/assets/image/image4.png" alt="" srcset="">
            </div>
            <div class="list">
                <ul>
                    <li>
                        <div class="cell">{{ $t('layout.grade') }}</div>
                        <div class="cell">{{ $t('layout.NumberOfAddresses') }}</div>
                    </li>
                    <template v-for="(item, index) in vInfo">
                        <li :key="index" v-if="index < 3">
                            <div class="cell">v{{ Number(index) + 1 }}</div>
                            <div class="cell">{{ item }}</div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
        <div class="myInvitation">
            <div class="title">
                <img src="@/assets/image/image3.png" alt="" srcset="">
                {{ $t('layout.myInvitation') }}
                <img src="@/assets/image/image4.png" alt="" srcset="">
            </div>
            <div class="list">
                <ul>
                    <li>
                        <div class="cell">{{ $t('layout.address') }}</div>
                        <div class="cell">{{ $t('layout.PersonalDeposit') }}</div>
                        <div class="cell">{{ $t('layout.MemberDeposit') }}</div>
                    </li>
                    <li v-for="(item, index) in directsByPage" :key="index">
                        <div class="cell">{{ formatAddress(item.directAddr) }}</div>
                        <div class="cell">{{ fromWei(item.personalAmount) }}</div>
                        <div class="cell">{{ fromWei(item.downlineAmount) }}</div>
                    </li>
                </ul>
                <van-pagination v-model="setat2.pageNum" :total-items="setat2.total" :items-per-page="setat2.pageSize"
                    :force-ellipses="true" :show-page-size="5" @change="onLoad" />
            </div>
        </div>
    </div>
    <referrer ref="referrerRefs" @setReferrer="setReferrer" />
    <ranking-record ref="recordRefs" :rrInfos="rankInfo.rrInfosB" />
    <ranking-record-2 ref="recordRefs2" :rrInfos="rankInfo.rrInfos" />
</template>

<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .pool-banner {
        .pool-banner-bg {
            padding: 25px 0 0 0;
            background: #ffeed1 url("@/assets/image/image1.png") no-repeat;
            background-size: contain;
            background-position: top;

            .DirectPromotionPool {
                text-align: center;
                margin-bottom: 15px;

                .value {
                    padding-top: 14px;
                    font-size: 30px;
                    font-weight: bold;
                    color: #FFA000;
                    line-height: 30px;

                    .van-count-down {
                        font-size: 30px;
                        font-weight: bold;
                        color: #FFA000;
                    }
                }
            }

            .row {
                margin: 10px 16px 0 16px;
                position: relative;
                padding: 16px 0;
                // background: rgba(255, 255, 255, 0.5);
                border-radius: 8px;
                border: 1px solid rgba(255, 162, 0, 0.5);
                backdrop-filter: blur(10px);
                text-align: center;

                .label {
                    font-size: 12px;
                    font-weight: 400;
                    color: #1F2120;
                }

                .value {
                    margin-top: 9px;
                    font-size: 20px;
                    font-weight: bold;
                    color: #FFA000;
                }

                .logs {
                    position: absolute;
                    right: 16px;
                    top: 16px;
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    font-weight: 400;
                    color: #FFA000;

                    img {
                        margin-right: 4px;
                        width: 13px;
                        height: 13px;
                    }
                }
            }

            .van-tabs {
                &:deep(.van-tabs__wrap) {
                    margin: 0 16px;
                    border: 1px solid rgba(255, 162, 0, 0.5);
                    border-radius: 8px;


                    .van-tabs__nav {
                        background: transparent;
                        backdrop-filter: blur(10px);

                        .van-tab {
                            &.van-tab--active {
                                background: #FFFFFF;
                                border-radius: 8px;

                            }
                        }

                        .van-tabs__line {
                            display: none;
                        }
                    }
                }
            }
        }

        .list {
            position: relative;
            background: #fff;
            margin-top: 12px;
            border-radius: 16px 16px 3px 3px;

            ul {
                li {
                    display: flex;

                    &:first-child {
                        padding-top: 10px;

                        .cell {
                            color: #B06D00;
                        }
                    }

                    .cell {
                        flex: 1;
                        text-align: center;
                        line-height: 30px;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .pool-ranking {
        margin-top: 12px;
        padding: 20px;
        background: #fff;

        .row-box {
            display: flex;
            justify-content: space-between;

            .cell {
                &:first-child {
                    background: url("@/assets/image/image5.png") center/cover no-repeat;
                }

                &:last-child {
                    background: url("@/assets/image/image6.png") center/cover no-repeat;
                }

                width: 147px;
                height: 92px;
                text-align: center;

                .label {
                    padding-top: 18px;
                }

                .value {
                    padding-top: 14px;
                    font-size: 30px;
                    font-weight: bold;
                    color: #FFA000;
                    line-height: 30px;
                }
            }
        }

        .list {
            margin-top: 16px;

            ul {
                li {
                    margin-top: 4px;
                    display: flex;
                    background: #FAFAFA;
                    border-radius: 3px;

                    &:first-child {

                        background: rgba(255, 160, 0, 0.1);

                        .cell {
                            color: #B06D00;
                        }
                    }

                    .cell {
                        flex: 1;
                        text-align: center;
                        line-height: 30px;
                        font-weight: 500;
                    }
                }
            }

            .van-pagination {
                margin-top: 16px;
                padding: 0;
            }
        }
    }

    .pledge {
        margin-top: 12px;
        padding: 20px;
        background: #FFFFFF;
        border-radius: 3px;

        .van-field {
            position: relative;
            background: rgba(245, 245, 245, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(204, 204, 204, 0.5);
            padding: 0;

            &:deep(input) {
                padding-left: 10px;
            }

            .van-button {
                width: 80px;
            }
        }

        .myLink {
            margin-top: 12px;
            height: 54px;
            background: #FAFAFA;
            border-radius: 8px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                width: 15px;
                height: 15px;
            }
        }
    }

    .receive-list {
        margin-top: 12px;
        padding: 20px;
        background: #FFFFFF;
        padding: 20px 16px;
        border-radius: 3px;

        .row-total {
            display: flex;
            justify-content: space-between;
            text-align: center;
            padding: 20px 16px;
            background: rgba(254, 175, 42, 0.1);
            border-radius: 3px;

            .label {
                font-size: 12px;
                font-weight: 400;
                color: #B06D00;
                line-height: 12px;


            }

            .value {
                margin-top: 10px;
                font-size: 25px;
                font-weight: bold;
                color: #FFA000;
                line-height: 25px;

                span {
                    font-size: 14px;
                }
            }
        }

        .row {


            .cell {
                flex: 1;
                display: flex;
                align-items: center;
                margin-top: 12px;
                height: 54px;
                padding: 0 16px;
                background: #FAFAFA;
                border-radius: 3px;

                .cel {
                    flex: 1;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: #1F2120;

                    &:first-child {
                        text-align: left;

                    }

                    &:last-child {
                        text-align: right;
                    }

                    .van-button {
                        border: none;
                        font-size: 14px;
                        font-weight: bold;
                        color: #FFA000;
                        line-height: 14px;
                        background: none;
                    }
                }
            }
        }
    }

    .allNetworkVMembers,
    .myInvitation {
        margin-top: 12px;
        background: #FFFFFF;
        border-radius: 3px;
        padding: 20px 0;


        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 500;
            color: #FFA000;
            text-align: center;

            img {
                flex: 1;
                width: 84px;
                height: 17px;
            }
        }

        .list {
            margin-top: 10px;
            padding: 0 20px;

            ul {
                li {
                    display: flex;

                    &:first-child {
                        padding-top: 10px;

                        .cell {
                            color: #B06D00;
                        }
                    }

                    .cell {
                        flex: 1;
                        text-align: center;
                        line-height: 30px;
                        font-weight: 500;
                    }
                }
            }

        }
    }
}
</style>